<template>
  <div class="outBox">
    <img src="../assets/img/logo.png" class="logo" />
    <div class="middle">
      <div class="middle1">
        <form id="registForm" v-if="show" name="myform">
          <p>
            <input
              class="text1"
              id="name"
              v-model="form.username"
              placeholder="请输入队长姓名+队伍名称"
            />
          </p>
          <p>
            <input
              class="text2"
              id="phone"
              v-model="form.phone"
              placeholder="请输入队长电话"
            />
          </p>
        </form>

        <div class="upload">
          <input
            class="file"
            type="file"
            @change="getFile($event)"
            multiple="multiple"
          />
          <!-- <button class="btn2" lay-submit lay-filter="layui-authorupload-submit" @click="upLoad(formData)">上传</button> -->
        </div>
        <div class="tip">
          <p>温馨提示:</p>
          <p>
            &nbsp;1.注意谨慎填写姓名与电话号码，如有填错请联系负责人修改(负责人电话：18666630784)
          </p>
          <p>&nbsp;2.上传文件后需点击“提交”确认提交</p>
          <p>
            &nbsp;3.如要修改，重新上传文件即可，比赛报名截止前均可重新上传报名文件，不限修改次数
          </p>
        </div>
      </div>
    </div>
    <div style="text-align: center">
      <b-button
        @click="upLoad(form.username, form.phone, formData);isEmpty()"
        pill
        variant="primary"
        size="lg"
        form="registForm"
        type="submit"
        >&nbsp;&nbsp;&nbsp;&nbsp;提交&nbsp;&nbsp;&nbsp;&nbsp;</b-button
      >
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import saveTeam from "../network/api/saveTeam";

export default {
  name: "index",
  data() {
    return {
      form: {
        username: "",
        phone: "",
      },
      selected: null,
      show: true,
      PcOrPhone: "",
      files: {
        file: "",
      },
      formData: "",
    };
  },
  methods: {
    getFile(e) {
      let files = e.target.files;
      console.log(this.files);
      this.files.file = files;

      var formData = new window.FormData();

      for (let i = 0; i < files.length; i++) {
        formData.append("files", files[i]);
      }

      this.formData = formData;
    },
    upLoad(name, phone, files) {

      // console.log("222")
      console.log(this.formData);
      saveTeam(name, phone, files).then((res) => {
        console.log(res);
        if (res.message === "保存成功") {
          alert("提交成功");
        } else {
          alert("提交失败！请联系负责人");
        }
      });
    },
    isEmpty() {
      // console.log("111")
      if (
        myform.name.value.toString().trim().length == 0 ||
        myform.phone.value.toString().trim().length == 0
      ) {
        alert("输入内容不能为空！");
        return false;
      } else {
        return true;
      }
    },
  },
  // beforeMount() {
  //     this.PcOrPhone = this.IsPC()
  // },
  // methods: {
  //     IsPC() {
  //         var userAgetInfo = navigator.userAgent;
  //         var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod"];
  //         var flag = true;
  //         for (var v = 0; v < Agents.length; v++) {
  //             if (userAgentInfo.indexOf(Agents[v]) > 0) {
  //                 flag = false;
  //                 break;
  //             }
  //         }
  //         if (window.screen.width >= 768) {
  //             flag = true;
  //         }
  //         console.log(flag)
  //         return flag;
  //     },

  // }
};
</script>

<style scoped>
.outBox {
  margin: 0 auto;
  padding: 0;
}
.logo {
  width: 100%;
}
.middle {
  margin: 0 auto;
  width: 90%;
  background-color: #fff;
}
.middle1 {
  text-align: center;
  vertical-align: middle;
  width: 100%;
  background-color: #f7f7f7;
}
input {
  padding: 5pt 40pt;
  width: 80%;
  letter-spacing: 2pt;
  font-size: 7pt;
  font-family: "SimHei";
  background: #f7f7f7;
  border-bottom: 1pt solid #b1c1d1;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  outline: none;
}
.text1 {
  background-image: url("./../assets/img/team@2x.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  width: 75%;
  margin-top: 15pt;
}
.text2 {
  background-image: url("./../assets/img/Number@2x.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  width: 75%;
  margin-top: 5pt;
}
.file {
  width: 75%;
  margin-top: 5pt;
  background-image: url("./../assets/img/upload.png");
  background-repeat: no-repeat;
}
.tip {
  margin-top: 17.5pt;
  padding: 5px;
  border: 1px dashed #0d59a7;
  border-radius: 5pt;
  background-color: #f7f7f7;
  color: #005af1;
  letter-spacing: 1pt;
  font-family: "SimHei";
  text-align: left;
  font-size: 6pt;
}
.btn {
  margin-top: 30px;
  font-size: 15pt;
}
.bottom {
  margin-top: 30pt;
  width: 100%;
  height: 25pt;
  background-color: #0d59a7;
}
::-webkit-input-placeholder {
  color: #bcbcbc;
}
.btn2 {
  background-color: skyblue;
  border: none;
  color: white;
  font-family: Arial;
  padding: 5px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  /* font-size: 18px; */
  margin-right: 50px;
  cursor: pointer;
}
</style>
